import { RouterGurad } from "@/router/routergurad";
import { Suspense, useEffect } from "react";
import routes from "@/router";
import Headnav from "@/components/Headnav";

import Footer from "@/components/footer";
import { shallowEqual, useDispatch, useSelector } from "react-redux";
import { rootState } from "./store";
import Genie from "@/components/Genie";
import { usertype } from "./store/reducers/home";
import { getcollectidar1 } from "./store/action/home";
function App() {
  const dispatch = useDispatch();
  const { essaypretheme, user } = useSelector(
    (store: rootState) => ({
      essaypretheme: store.home.essaypretheme,
      user: store.home.user as usertype,
    }),
    shallowEqual
  );
  //全局主题切换
  useEffect(() => {
    if (essaypretheme === "light") {
      document.body.className = "";
    } else {
      document.body.className = "dark";
    }
  }, [essaypretheme]);
  useEffect(() => {
    if (!user.id) {
      dispatch(
        getcollectidar1({
          collectarr: [],
          commentarr: [],
          messagearr: [],
        })
      );
    }
  }, [dispatch, user]);
  return (
    <div className="appwrap">
      <Genie></Genie>
      <Headnav></Headnav>
      <div className="routerwrap">
        {<Suspense>{RouterGurad(routes)}</Suspense>}
      </div>
      <Footer></Footer>
    </div>
  );
}

export default App;
